<template>
  <div class="risk-source-container">
    <!-- 顶部查询条件 -->
    <div class="screen-conditions-container">
      <ScreenConditions :isDataType="false">
        <template slot="conditions">
          <SelectBlock
            :allowClear="true"
            v-model="conditions.orgCode"
            @change="blockChange($event)"
          ></SelectBlock>
          <a-select
            style="width: 160px"
            placeholder="请选择过程(区域)"
            v-model="conditions.changeProcessId"
            @change="processChange"
            allowClear
            showSearch
          >
            <a-select-option
              :value="item.id"
              v-for="(item, index) in stepSource"
              :key="index"
            >
              {{ item.changeProcess }}
            </a-select-option>
          </a-select>
          <a-select
            v-if="reportFlag"
            style="width: 160px"
            placeholder="请选择危险源名称"
            v-model="conditions.changeNameId"
            @change="nameChange"
            allowClear
            showSearch
          >
            <a-select-option
              :value="item.id"
              v-for="(item, index) in stepSource"
              :key="index"
            >
              {{ item.changeName }}
            </a-select-option>
          </a-select>
        </template>
        <template slot="operate">
          <a-button type="primary" @click="search()"> 查询 </a-button>
          <a-button v-if="!reportFlag" @click="goBack()"> 返回 </a-button>
        </template>
      </ScreenConditions>
    </div>
    <div class="layout">
      <router-view ref="routerView" v-if="show"></router-view>
    </div>
  </div>
</template>

<script>
import SelectBlock from "@/components/wisdom-beam/SelectBlock";
import { getListAreaAndName } from "@/api/wisdom-beam/security-app.js";
export default {
  components: {
    SelectBlock,
  },
  data() {
    return {
      //顶部筛选条件
      conditions: {
        //标段
        orgCode: undefined,
        changeProcessId: undefined,
        changeProcess: "",
        changeNameId: undefined,
        changeName: "",
      },
      stepSource: [],
      show: false,
    };
  },
  computed: {
    reportFlag() {
      return this.$route.path == "/nebula/wisdom-beam-app/riskSource/list";
    },
  },
  mounted() {
    this.getStepAreaData();
  },
  methods: {
    //监听标段切换
    blockChange() {
      this.show = true;
    },
    goBack() {
      this.$router.push({
        path: "/nebula/wisdom-beam-app/riskSource/list",
      });
    },
    search() {
      this.$refs["routerView"].pager.page = 1;
      this.$refs["routerView"].getTableData();
    },

    processChange(e) {
      if (e) {
        this.conditions.changeProcess = this.stepSource.find(
          (item) => item.id == e
        ).changeProcess;
      } else {
        this.conditions.changeProcess = "";
      }
      this.search();
    },
    nameChange(e) {
      if (e) {
        this.conditions.changeName = this.stepSource.find(
          (item) => item.id == e
        ).changeName;
      } else {
        this.conditions.changeName = "";
      }
      this.search();
    },
    //获取过程区域和危险源名称
    getStepAreaData() {
      getListAreaAndName()
        .then((res) => {
          let { data } = res;
          let list = data?.result || [];
          this.stepSource = [];
          list.forEach((item, index) => {
            if (item) {
              this.stepSource.push({
                id: index + 1,
                changeName: item.changeName,
                changeProcess: item.changeProcess,
              });
            }
          });
        })
        .catch((_) => {
          this.stepSource = [];
        });
    },
  },
};
</script>

<style lang="less" scoped>
.risk-source-container {
  box-sizing: border-box;
  height: 100%;
  display: flex;
  flex-direction: column;
  padding: 0 10px 10px 10px;
  overflow: hidden;
  .layout {
    flex: 1;
    overflow: hidden;
  }
}
</style>
